<!-- 
  组件使用示例：
  <yyzx-switch v-model="form.data.defaultFlag" true-value="1" false-value="0" />
 -->

<script setup>
  // v-model 默认 是 :modelValue 和 @update:modelValue 的组合

  import { computed } from 'vue'

  const props = defineProps({
    modelValue: [Boolean, Number],
    color: {
      type: String,
      default: '#20c6b2',
    },
    trueValue: {
      default: true,
    },
    falseValue: {
      default: false,
    },
    customStyle: String,
  })

  const emit = defineEmits(['update:modelValue'])

  const isChecked = computed(() => {
    // 当：当前的值 等于 指定的 true值 开关就选中 否则就取消选中
    return props.modelValue === props.trueValue
  })

  const onChange = (e) => {
    // 开关时，不要给true和false，要给别人配置的true值和false值
    emit(
      'update:modelValue',
      e.detail.value ? props.trueValue : props.falseValue
    )
  }
</script>

<template>
  <view class="yyzx-switch">
    <!-- 绑定 checked 属性的时候，不要直接绑定 modelValue，因为 modelValue 不一定是布尔值 -->
    <switch
      :checked="isChecked"
      @change="onChange"
      :color="color"
      :style="customStyle"
    />
  </view>
</template>

<style>
  .yyzx-switch {
    display: flex;
    align-items: center;
    height: 100%;
  }
</style>
